<template>
	<view class="page">
		<view class="content_top">
			<view class="back" @click="toback"> <uni-icons type="back" size="30" color="#fff"></uni-icons> </view>
			<image class="logo" :src="`${store.state.baseImgUrl}static/indexpage/qsjg.png`"></image>
		</view>

		<view class="content2">
			
				<swiper class="imageContainer" @change="handleChange" previous-margin="100rpx" next-margin="100rpx" circular  autoplay>
					<block v-for="(item,index) in topimg" :key="index">
						<swiper-item class="swiperitem">
							<view class="itemImg" :class="currentIndex == index ?'swiperactive': ''">
								<image  :src="item.imgurl" lazy-load mode="scaleToFill"></image>
								<view class="iteminfobox">
									<view class="itemtitle">
										<text>{{item.title}}</text>
									</view>
									<view class="itemenglish">
										{{item.english}}
									</view>
									<view class="iteminfo">
										{{item.info}}
									</view>
								</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
import { useStore } from 'vuex';
	
	const store = useStore(
	)
	const topimg=ref([
		{
			imgurl:`${store.state.baseImgUrl}static/indexpage/index_top1.png`,
			title:"慈禧太后挂衣柏",
			english:"Empress Dowager Cixi hung a robe cypress",
			info:"慈禧太后挂衣柏(又名钗孔柏树)，位于藏经阁前。"
		},
		{
			imgurl:`${store.state.baseImgUrl}static/indexpage/index_top2.png`,
			title:"慈禧太后挂衣柏",
			english:"Empress Dowager Cixi hung a robe cypress",
			info:"慈禧太后挂衣柏(又名钗孔柏树)，位于藏经阁前。"
			},
		{
			imgurl:`${store.state.baseImgUrl}static/indexpage/index_top1.png`,
			title:"慈禧太后挂衣柏",
			english:"Empress Dowager Cixi hung a robe cypress",
			info:"慈禧太后挂衣柏(又名钗孔柏树)，位于藏经阁前。"
			},
		{
			imgurl:`${store.state.baseImgUrl}static/indexpage/index_top2.png`,
			title:"慈禧太后挂衣柏",
			english:"Empress Dowager Cixi hung a robe cypress",
			info:"慈禧太后挂衣柏(又名钗孔柏树)，位于藏经阁前。"
			},
	])
	const mode=ref("dot")
const toback=()=>{
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #5e0e03;
		.content_top{
			position: relative;
			.back{
				position: absolute;
				top: 100rpx;
				left: 50rpx;
				width: 50rpx;
				height: 50rpx;
				font-size: 30rpx;
				color: #fff;
				z-index: 101;
			}
			.logo{
				height: 500rpx;
				width: 100%;
			}
			}
			
		.content2{
			position: relative;
			height: 1100rpx;
			
			.imageContainer{
				height: 1060rpx;
				width: 100%;
			}
			.swiperitem {
				/* height: 500rpx; */
				// height: 255upx;
				height: 960rpx;
				padding: 0upx 30rpx;
				box-sizing: border-box;
				position: relative;
				top: 5%;
				
				.itemImg {
					position: absolute;
					width: 91%;
					height: 960rpx;
					box-sizing: border-box;
				
					/* height: 380rpx; */
					// height: 255upx;
					border-radius: 15rpx;
					z-index: 5;
					opacity: 1;
					background:url('https://buma-1307931616.cos.ap-guangzhou.myqcloud.com/xian/static/main/jgbigbox.png');
					background-repeat: no-repeat;
					background-size: contain;
					// box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24);
					image{
						width: 94%;
						height: 400rpx;
						margin-left: 3%;
						margin-top: 10rpx;
					}
					.iteminfobox{
						padding: 30rpx 60rpx;
						color: #fff; 
						width: ;
						.itemtitle{
							font-size: 35rpx;
							color: #ffdc00;
							text{
								display: inline-block;
								padding-bottom: 10rpx;
								border-bottom: 1px solid #fff;
							}
							
						}
						.itemenglish{
							font-size: 12rpx;
						}
						.iteminfo{
							margin-top: 50rpx;
							font-size: 28rpx;
						}
					}
				}
				.swiperactive {
					width: 91%;
					opacity: 1;
					z-index: 10;
					/* height: 430rpx; */
					// height: 287upx;
					height: 960rpx;
					top: 0%;
					transition: all .2s ease-in 0s;
				}
				
				.zhankai{
					text-align: center;
					.iconfont{
						margin-left: 10upx;
					}
				}
			}
			
		}
		.nomore{
			position: relative;
			bottom:0rpx ;
			text-align: center;
			width: 100%;
			z-index: 1;
			height:100rpx;
			.position_re{
				width: 100%;
				position: absolute;
				bottom:30rpx ;
			}
	 
		}
	}

	
</style>